<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>随机 | 中国风 | 颜色</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <!-- <link rel="stylesheet" href="./style/index.css" /> -->
    <link rel="stylesheet" href="./style/randerColor.css" />
    <script src="./script/jquery-3.6.0.min.js"></script>
    <script src="./script/jquery.animate-colors-min.js"></script>
    <script src="./script/judgeBgColor.js"></script>
    <!-- <script src="./script/snowy4.js"></script> -->
  </head>

  <body id="bgWrap">
    <!-- <div class="snow-container"></div> -->
    <!-- <p style="color: #fff; opacity: 0.5">刷新看看...</p> -->
    <div class="chinese" style="display: none">
      <button class="changeColor" id="changeColor"></button>
      <div class="color-info">
        <div class="c-id center copy" id="chineseColorId"></div>
        <div class="c-pinyin left copy" id="chinesePinyin"></div>
        <div class="c-name left copy" id="chineseName"></div>
        <div class="color-number">
          <div class="c-chex right copy" id="chineseColorHex"></div>
          <div class="c-crgb right copy" id="chineseColorRgb"></div>
          <div class="c-ccmyk right copy" id="chineseColorCmyk"></div>
        </div>
      </div>
      <a href="./colorList.html" class="back-list"></a>
    </div>

    <!-- <script src="./script/judgeBgColor.js"></script> -->
  </body>
  <script>
    window.addEventListener("load", function () {
      console.log(window.innerWidth);

      window.addEventListener("resize", function () {
        console.log(window.innerWidth);
      });
    });

    $.getJSON("./data/chineseColor.json", function (data) {
      var randomNum;
      randomNum = Math.random();
      randomNum = Math.round(randomNum * 250);

      var randomColorHex = data[randomNum].chex;
      var ForegroundColor = data[randomNum].ForegroundColor;
      console.log(ForegroundColor);

      $("#bgWrap").animate(
        {
          // color: ForegroundColor,
          backgroundColor: randomColorHex,
        },
        1500
      );

      $("#chineseColorId").html(data[randomNum].cid);

      $("#chineseName").html(data[randomNum].cname.toUpperCase());

      $("#chinesePinyin").html(data[randomNum].cpinyin);

      $("#chineseColorHex").html(data[randomNum].chex.toUpperCase());

      $("#chineseColorRgb").html(data[randomNum].crgb.toUpperCase());

      $("#chineseColorCmyk").html(data[randomNum].ccmyk.toUpperCase());

      $(".chinese").fadeIn(1000);
    });

    //点击切换颜色

    $("#changeColor").click(function () {
      $.getJSON("./data/chineseColor.json", function (data) {
        var randomNum;
        randomNum = Math.random();
        randomNum = Math.round(randomNum * 250);
        var randomColorHex = data[randomNum].chex;
        var randomColorFore = data[randomNum].ForegroundColor;
        // console.log("点击后颜色：" + randomColorFore);
        //设置文字为前景色
        $("#bgWrap").css("color", randomColorFore);

        $("#bgWrap").animate(
          {
            backgroundColor: randomColorHex,
          },
          1000
        );

        $("#chineseColorId").html(data[randomNum].cid);

        $("#chineseName").html(data[randomNum].cname.toUpperCase());

        $("#chinesePinyin").html(data[randomNum].cpinyin);

        $("#chineseColorHex").html(data[randomNum].chex.toUpperCase());

        $("#chineseColorRgb").html(data[randomNum].crgb.toUpperCase());

        $("#chineseColorCmyk").html(data[randomNum].ccmyk.toUpperCase());

        $(".chinese").fadeIn(1000);
      });
    });


    //测试复制文本(某一个)
    // const chinesePinyin = document.getElementById("chinesePinyin");

    // chinesePinyin.addEventListener("click", function () {
    //   const text = chinesePinyin.innerText;
    //   navigator.clipboard
    //     .writeText(text)
    //     .then(() => console.log(`已将"${text}"复制到剪贴板！`))
    //     .catch(() => console.error("复制失败！"));
    // });

    // 获取所有具有 class 为 "copy" 的元素
    const copyElements = document.querySelectorAll(".copy");

    // 为每个元素添加点击事件监听器
    copyElements.forEach((element) => {
      element.addEventListener("click", function () {
        // 获取元素的文本内容
        const text = element.innerText;

        // 复制文本内容到剪切板
        navigator.clipboard
          .writeText(text)
          .then(() => alert(`已将【${text}】复制到剪贴板！`))
          .catch(() => console.error("复制失败！"));
      });
    });
  </script>
</html>
